iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 14

#14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化?

  • 分享至 

  • xImage
  •  

繼續昨天的主題,該怎麼用 Chakra UI 做開發呢?現成的元件該怎麼去做客製化?專案有定設計系統 (design system),那怎麼跟 Chakra UI 結合呢?

Chakra UI

Style Props

Chakra UI 提供的元件都會包含這些 style props,什麼東西?就是一般的 React component props,可是他的用途是加一些 CSS styling 到元件上,而這些 props 的命名都很簡單,如果大家已熟悉 Tailwind CSS 的話,一定很快就會用這些 style props。

import { Box, Flex } from "@chakra-ui/react"

// m={2} 代表把 margin 設成 `theme.space[2]`,也就是 2 * 4px
<Box m={2} maxW="960px">Tomato</Box>

// display: flex, align-items: center, 和 justify-content: space-between
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>

// 上面的元件可以直接用 Flex 元件來代替 `<Box display="flex" />`
<Flex align="center" justify="center">
  Flex Container
</Flex>

Gradient (漸層)

現在很流行的漸層設計,Chakra UI 也提供一些 gradient API,讓我們可以快速寫漸層。

  • linear(<direction>, <from>, <to>)
  • radial(<from>, <to>)
  • repeating-linearconic,等等其他漸層模式

除了 background 相關的 API 之外,也不忘記 text gradient,就是讓文字加上漸層~

import { Text } from "@chakra-ui/react"

<Text
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text" // background-clip: text
  fontSize="6xl" // font-size: theme.fontSizes.6xl => 3.75rem
  fontWeight="extrabold" // font-weight: theme.fontWeights.extrabold => 800
>
  Welcome to Chakra UI
</Text>

像這樣:
Text Gradient

Color Mode (Light / Dark Mode)

越來越多網站有提供 dark mode 了,而 Chakra UI 內建支援 color mode 管理喔!Chakra UI 會把使用者設定的 color mode 存到瀏覽器的 localStorage,讓使用者下一次來到網站的時候,網站會採取之前設定好的模式。想要使用 color mode 的話,必須加這些程式:

// theme.js

import { extendTheme } from "@chakra-ui/react"

const config = {
  initialColorMode: "light", // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把設定加進 theme 裡
const theme = extendTheme({ config })

export default theme

還有很重要的 ColorModeScript,這 script 會確保我們網站的 color mode 會持續跟 localStorage 同步,而這 script 一定要放在 body 之前或是如果用 Next.js 那要放在我們的 pages/_document.js 裡:

// pages/_document.js

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          // body 裡的第一個~
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main /> // 這是我們的 App!
          <NextScript />
        </body>
      </Html>
    )
  }
}

Responsive

這應該是很多人很在意的功能,使用上也很簡單,而且 Chakra UI 是採用 @media(min-width) 的方式,讓畫面是 mobile-first 的~ 內建有提供一些 breakpoints,不過我們也可以去做調整!基本上,寫 responsive 元件有兩種方法:

Array syntax

用 array (陣列) 定義 style props,像下面的例子,我們想要讓 Box 的寬度跟著螢幕大小而改變:

<Box bg="red.200" w={[300, 400, 500]}>
  This is a responsive box
</Box>

所以

  • 當螢幕大於 0em 寬度會是 300px
  • 當螢幕大於 30em 寬度會是 400px
  • 當螢幕大於 48em 寬度會是 500px

更多的 breakpoints 可以看在這裡

Object syntax

除了用 array 以外,我們也可以用 object (物件),好處是不需要按照順序去設定 style props:

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
  This is responsive text
</Text>

物件裡的每一個 key 會對應到一個 breakpoint,例如 md 就是大於 48em 的時候,fontSize 字體大小會等於 40px

Chakra Factory

以上講到怎麼用現成的元件去做客製,那如果我們想要從頭刻一個元件該怎麼辦呢?或是原本已經有的非 Chakra 元件,該怎麼做?Chakra UI 有提供叫做 Chakra Factory,讓任一個元件也可以有 style props 方便去做客製:

<chakra.button
  px="3"
  py="2"
  bg="green.200"
  rounded="md"
  _hover={{ bg: "green.300" }}
>
  Click me
</chakra.button>

我們可以用 chakra.<element> 然後 <element> 為 HTML element 開發全新的元件。或是我們也可以用 Chakra factory function 去把其他元件 Chakra-化

// AnotherCard 是個 React 元件
const AwesomeCard = chakra(AnotherCard, {
  baseStyle: {
    shadow: "lg",
    rounded: "lg",
    bg: "white",
  },
})

Global Styles

除了針對元件的客製化,我們也可以加一些 Global Styles,就是對整個 HTML 加一些 CSS styling,例如設定字體~

const theme = {
  styles: {
    global: {
      "html, body": {
        color: "gray.600",
        lineHeight: "tall",
        fontFamily: "'Open Sans', Helvetica Neue, sans-serif",
      },
      a: {
        color: "teal.500",
      },
    },
  },
}

別忘記把上面的 theme 加進 ChakraProvider 裡喔~

小結

大家本來就知道 Chakra UI 嗎?覺得如何呢?個人覺得真的好用!因為他提供蠻多元件可以直接拿來用,而且還有像 Tailwind CSS 的那種 style props 方式,讓客製化變得簡單一些~ 想看 Chakra UI 的簡介和比較可以看這篇

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 不過這專案不是用 Chakra UI 開發出來的喔。

祝大家明天上班上課愉快!

Live Demo

晚安 <3

看更多


上一篇
#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI
下一篇
#15 No-code 之旅 — 期中小結
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言